<template>
	<div id="wanfa">
		<div v-for="item in radioAll">
			<div class="weishu">
				<span class="wsCon">{{ item.weishu }}</span>
				<div class="wsTit">
				    <el-radio-group v-model="item.radioCon" size="small" @change="change(item.radioCon, item)">
					    <el-radio-button label="全"></el-radio-button>
					    <el-radio-button label="大"></el-radio-button>
					    <el-radio-button label="小"></el-radio-button>
					    <el-radio-button label="单"></el-radio-button>
					    <el-radio-button label="双"></el-radio-button>
					    <el-radio-button label="清"></el-radio-button>
				    </el-radio-group>
				</div>
			</div>
			<div class="checkNum">
				<el-checkbox-group v-model="item.checkboxGroup">
	      			<el-checkbox-button v-for="city in item.checkHaoMa" :label="city" :key="city">{{city}}</el-checkbox-button>
	    		</el-checkbox-group>
			</div>
		</div>
		<el-dialog title="提示" :visible.sync="centerDialogVisible" width="80%" center>
            <div class="dialogCgj">
        		<ul>
        			<li v-for="item in dataList">
        				<p>号码：{{item.haoma}}</p>
        				<p>倍数：{{item.beishu}}</p>
        				<p>注数：{{item.zhushu}}</p>
        				<p>总金额：{{item.allMoney}}</p>
        			</li>
        		</ul>
      		</div>
      		<span slot="footer" class="dialog-footer">
    			<el-button type="info" @click="centerDialogVisible = false">取 消</el-button>
    			<el-button type="danger" @click="postDataList">提交</el-button>
  			</span>
    	</el-dialog>
    	<el-dialog title="提示" :visible.sync="centerDialogVisible2" width="80%" center>
    		<p style="text-align: center;">请选择号码后再进行投注！</p>
    	</el-dialog>
		<div class="footer">
			<div @click='clearAllNum'>
				<el-button type="info" size="mini">清空号码</el-button>
			</div>
			<p>{{zhushu}} 注&nbsp&nbsp&nbsp{{allMoney}} 元</p>
			<div @click="addNum">
				<el-button type="danger" size="mini">添加投注</el-button>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		props: ["typeData"],
		data () {
			return {
				centerDialogVisible: false,
				centerDialogVisible2: false,
				beishu: 1,
				radioAll: [],
				dataList: []
			}
		},
		created () {
			let typeData = this.typeData
			this.radioAll = []
			this.radioAll = [...typeData]
		},
		methods: {
			clearAllNum () {
				this.radioAll.forEach(item => {
					item.checkboxGroup = []
					item.radioCon = '无'
				})
			},
			addNum () {
				this.dataList = []
				if (this.zhushu === 0) {
		            this.centerDialogVisible2 = true
		        } else {
		            let beishu1 = this.beishu
		            let zhushu1 = this.zhushu
		            let allMoney1 = this.allMoney
		            let dataArr = []
		            this.radioAll.forEach((item, index) => {
		            	let strNum = item.checkboxGroup.sort().join()
		            	if(strNum) {
		            		dataArr.push(strNum)
		            	} else {
		            		dataArr.push('X')
		            	}
		            })
		            console.log(dataArr)
		            let data = dataArr.join("+")
		            this.dataList.push({haoma: data, beishu: beishu1, allMoney: allMoney1, zhushu: zhushu1})
		            
		            this.centerDialogVisible = true
		        }
			},
			postDataList () {
				var list = this.$store.state.payment
				this.dataList.forEach(item => {
					list.push(item)
				})
//				console.log("有数据", list)
				this.$store.commit("payment", list)
				
				
				this.centerDialogVisible = false
				this.clearAllNum()
				console.log("提交")
				this.$router.push("/payment")
			},
			change(val, obj) {
        		let type = typeof val
		        if (type === 'string') {
		          switch (val) {
		            case '全':
		              obj.checkboxGroup = obj.checkHaoMa
		              break
		            case '大':
		              obj.checkboxGroup = ['5', '6', '7', '8', '9']
		              break
		            case '小':
		              obj.checkboxGroup = ['0', '1', '2', '3', '4']
		              break
		            case '单':
		              obj.checkboxGroup = ['1', '3', '5', '7', '9']
		              break
		            case '双':
		              obj.checkboxGroup = ['0', '2', '4', '6', '8']
		              break
		            case '清':
		              obj.checkboxGroup = []
		              obj.radioCon = '无'
		              break
		            default:
		              break
		          }
		        }
		    }
		},
		computed: {
			zhushu () {
				let sum = 0
				this.radioAll.forEach(item => {
            		sum += item.checkboxGroup.length
          		})
				return sum
			},
			allMoney () {
				return this.zhushu * this.beishu * 2
			},
			typeDatachange () {
				return this.$store.state.gameTab
			}
		},
		watch: {
			typeDatachange () {
				console.log("清除数据")
				this.clearAllNum()
			}
		},
		components: {
			
		}
	}
</script>

<style lang="less">
	#wanfa {
		width: 100%;
		padding: 1rem 0 4rem;
		.wsCon {
			display: inline-block;
			float: left;
			width: 18%;
		}
		.weishu {
			width: 100%;
			height: 3rem;
			margin-bottom: 1rem;
			line-height: 3rem;
		}
		.wsTit {
			display: inline-block;
			width: 82%;
			height: 100%;
			float: right;
			strong {
				display: inline-block;
				width: 3rem;
				height: 3rem;
				font-size: 18px;
				border-radius: 50%;
				border: 1px solid #ccc;
				text-align: center;
				line-height: 3rem;
			}
		}
		.is-active .el-radio-button__inner {
			color: #fff !important;
    		background-color: #ec2829 !important;
    		border-color: #ec2829 !important;
    		-webkit-box-shadow: -1px 0 0 0 #ec2829 !important;
    		box-shadow: -1px 0 0 0 #ec2829 !important;
		}
		.checkNum {
			width: 100%;
			margin: 2rem 0;
			.el-checkbox-group {
				display: inline-block;
				/*width: 96%;*/
				height: 10rem;
				margin: 0 auto;
				/*display: flex;*/
				/*flex-wrap: wrap;*/
				/*justify-content: space-between;*/
    			/*align-items: center;*/
			}
			label {
				/*float: left;*/
				display: inline-block;
				width: 20%;
				margin-bottom: 1rem;
			}
			.el-checkbox-button__inner {
				display: inline-block;
				width: 4.5rem;
				height: 4.5rem;
				padding: 0;
				text-align: center;
				line-height: 4.5rem;
				border: 1px solid #dcdfe6;
    			border-radius: 50%;
    			-webkit-box-shadow: none!important;
    			box-shadow: none!important;
    			transition: all 0;
			}
			.is-checked .el-checkbox-button__inner {
				color: #fff;
			    background-color: #ec2829;
			    border-color: #ec2829;
			    -webkit-box-shadow: -1px 0 0 0 #ec2829;
			    box-shadow: -1px 0 0 0 #ec2829;
			}
		}
		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4rem;
			background-color: #000;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			
			.clearLeft, .addRight {
				display: block;
				height: 2rem;
				width: 20%;
				padding: 0 1rem;
			} 
			p {
				display: inline-block;
			}
			button {
				padding: 8px 5px;
			}
		}
	}
</style>
